<template>
    <view class="p-l-r">
        <template v-for="row in dataRows" :key="row.id">
            <view class="log-item">
                <view>设备号：{{ row.deviceId }}</view>
                <view class='m-t-10'>用水量：{{Number((row.waterUsage / 1000).toFixed(2))}}L</view>
                <view class='m-t-10'>水费：{{ row.amount }}元</view>
                <view class='m-t-10'>原水TDS：{{ row.tdsRaw }}mg/L</view>
                <view class='m-t-10'>净水TDS：{{ row.tdsClean }}mg/L</view>
                <view class='m-t-10'>时间：{{ parseTime(row.reportTime) }}</view>
            </view>
        </template>
    </view>
    <LoadMore key-name="id" :api="pageApi" @finish="page" />
</template>

<script lang="ts" setup>
    import { pageApi } from '@/api/WaterBills';
    import LoadMore from '@/components/LoadMore/index.vue'
    import { parseTime } from '@/utils';
    import { ref } from 'vue';
    

    const dataRows = ref<any[]>([])

    function page(rows:any[]) {
        dataRows.value.push(...rows)
    }



</script>

<style lang="scss" src="./index.scss"></style>